<template>
    <div class="tagging-warp" :class="{'show':tagShow}" @touchend="touchStop($event)">
        <div class="tagging-postion">
            <canvas ref="canvs" @click="addTag($event)"></canvas>
        </div>
        <div class="tagging-bottom">
            <span @click="restore" :class="{'nonClick':ctxs.length==0}">{{button1}}</span>
            <span @click="save">{{button2}}</span>
        </div>
    </div>
</template>
<script>
/**
 * 功能 图片标注
 * @param button1 第一个按钮的文案 默认是撤回
 * @param button2 第二个按钮的文案 默认是完成
 * @param src 需要传入的图片地址
 * 事件说明 restore 第一个按钮变灰时点击触发  save第二个按钮点击时触发
 * 该组件有两个重要方法 一个为hide 一个为show 为别为显示隐藏该组件，请根据实际情况调用。TIP：该组件是通过绝对定位实现全屏(宽高与外层相等),外层请使用相对或绝对定位，且overflow-x: hidden;。
 * @Author: lizuping
 * @Date: 2018-00-00
 * @Last Modified by: lizuping
 * @Last Modified time: 2018-08-01 17:59:52
 */
// 组件模块
export default {
    name: 'temp',
    data () {
        return {
            width: 0,
            height: 0,
            img: false,
            ctx: false,
            ctxs: [],
            tagShow: false
        };
    },
    // 数据接口 type:String Number Boolean Function Object Array Symbol
    props: {
        button1: {
            type: String,
            default () {
                return '撤回';
            }
        },
        button2: {
            type: String,
            default () {
                return '完成';
            }
        },
        src: {
            type: String,
            default () {
                return '';
            }
        }
    },
    // 计算属性
    computed: {},
    // 数据监控
    watch: {},
    // 方法属性
    methods: {
        touchStop (e) {
            // 解决手滑动触发手势的问题
            e.stopPropagation();
        },
        hide () {
            this.tagShow = false;
        },
        show () {
            this.tagShow = true;
        },
        save () {
            this.tagShow = false;
            let res = false;
            if (this.ctxs.length > 0) {
                res = this.$refs.canvs.toDataURL('image/jpeg', 1);
                console.log(res);
            }
            this.$emit('save', res);
        },
        restore () {
            if (this.ctxs.length > 0) {
                this.ctxs.pop();
                this.draw();
            } else {
                this.$emit('restore');
            }
        },
        draw () {
            this.ctx.clearRect(0, 0, this.width, this.height);
            this.ctx.drawImage(this.img, 0, 0, this.width, this.height);
            let n = this.ctxs.length;
            let t = this.ctx;
            for (let i = 0;i < n;i++) {
                t.beginPath();
                t.arc(this.ctxs[i].left, this.ctxs[i].top, 10, 0, 360, false);
                t.fillStyle = 'red';// 填充颜色,默认是黑色
                t.fill();// 画实心圆
                t.closePath();
            }
        },
        addTag (e) {
            let v = this.getElementPostion(this.$refs.canvs);
            this.ctxs.push({left: e.clientX - v.left, top: e.clientY - v.top});
            this.draw();
        },
        setCavs (src) {
            var img = new Image();
            img.src = src;
            var that = this;
            var canvs = this.$refs.canvs;
            var ctx = canvs.getContext('2d');
            this.ctx = ctx;
            img.onload = function () {
                var w = this.width,
                    h = this.height;
                that.width = w;
                that.height = h;
                canvs.width = w;
                canvs.height = h;
                that.img = this;
                ctx.drawImage(this, 0, 0, that.width, that.height);
            };
        },
        getElementPostion (element) {
            var actualLeft = element.offsetLeft;
            var current = element.offsetParent;
            var actualTop = element.offsetTop;
            var elementScrollLeft = 0;
            var elementScrollTop = 0;
            while (current !== null) {
                actualLeft += current.offsetLeft;
                actualTop += current.offsetTop;
                elementScrollLeft += current.scrollLeft;
                elementScrollTop += current.scrollTop;
                current = current.offsetParent;
            }
            return {left: actualLeft - elementScrollLeft, top: actualTop - elementScrollTop};
        }

    },
    mounted () {
        this.setCavs(this.src);
    }
};
</script>
<style>
.tagging-warp {
    width: 100%;
    overflow: auto;
    position: absolute;
    height: 100%;
    z-index: 9999;
    left: 0;
    top: 0;
    box-sizing: border-box;
    padding: 0.2rem 0.2rem 0.8rem 0.2rem;
    background-color: rgba(0, 0, 0, 0.7);
    transform: translate3d(100%, 0, 0);
    transition: ease transform 360ms;
}
.tagging-warp.show {
    transform: translate3d(0, 0, 0);
}
.tagging-warp .tagging-postion {
    position: relative;
    overflow: auto;
    width: 100%;
    height: 100%;
}
.tagging-warp .tagging-bottom {
    position: absolute;
    height: 0.8rem;
    width: 100%;
    left: 0;
    bottom: 0;
}
.tagging-warp canvas {
    display: block;
}
.tagging-warp .tagging-bottom span {
    float: left;
    width: 30%;
    height: 0.8rem;
    color: #fff;
    line-height: 0.8rem;
    text-align: center;
    font-size: 0.3rem;
    transition: ease color 360ms;
}
.tagging-warp .tagging-bottom span.nonClick {
    color: #aaa;
}
.tagging-warp .tagging-bottom span:last-child {
    float: right;
}
</style>
